<template>
	<div class="j-lifebeed">
		<div class="jc-banner"></div>
		<div class="nav-back">
			<div class="tabs container clearfix">
				<div class="three-level">生命种子 <span>|</span></div>
				<div class="tab nav-tt" @click="toggleTab('Umbilical',1)"  :class="{navActive:1 == num}">脐带血造血干细胞</div>
				<div class="tab nav-tt" @click="toggleTab('Mesenchyme',2)" :class="{navActive:2 == num}">脐带间充质干细胞</div>
				<div class="tab nav-tt" @click="toggleTab('Placenta',3)"   :class="{navActive:3 == num}">胎盘间充质干细胞</div>
				<div class="tab nav-tt" @click="toggleTab('Peripheral',4)" :class="{navActive:4 == num}">外周血造血干细胞</div>
			</div>
		</div>
		<prince :is="currentTab" keep-alive></prince>
	</div>
</template>
<script>
import Umbilical from '../../components/Bank/Umbilical'
import Mesenchyme from '../../components/Bank/Mesenchyme'
import Placenta from '../../components/Bank/Placenta'
import Peripheral from '../../components/Bank/Peripheral'
export default {
  name: 'app',
  data () {
    return {
      currentTab: 'Umbilical', // currentTab 用于标识当前触发的子组件
	    num: '1'
    }
  },
  components: { // 声明子组件
    Umbilical,
    Mesenchyme,
    Placenta,
    Peripheral
  },
  methods: {
    toggleTab: function (tab, index) {
      this.currentTab = tab // tab 为当前触发标签页的组件名
	    this.num = index
    }
  }
}
</script>
<style  rel="stylesheet/scss" type="text/scss" lang="scss" scoped>
	.j-lifebeed{
		.jc-banner {
			height: 150px;
			background: url(../../assets/banner/banner02.jpg) center top no-repeat;
		}
		/*.nav-back{*/
			/*background: #e9e9e9;*/
			/*!*height: 50px;*!*/
			/*line-height: 50px;*/
			/*.nav-tt{*/
				/*display: inline-block;*/
				/*font-size: 16px;*/
				/*color: #333333;*/
				/*cursor: pointer;*/
				/*padding: 0 15px;*/
			/*}*/
			/*.navActive{*/
				/*color: #02adef;*/
			/*}*/
		/*}*/
	}
</style>